<template>
  <div class="wrap">
    <div class="header">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="q2">
          <el-form-item label="登录IP">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="登录地点">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </div>
        <div class="q3">
          <el-form-item label="状态">
            <el-select v-model="form.region" placeholder="登录状态">
              <el-option label="成功" value="shanghai"></el-option>
              <el-option label="失败" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="登录时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="开始日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker
                placeholder="结束时间"
                v-model="form.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-col>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main">
      <el-button type="primary" icon="el-icon-search">查询</el-button>
      <el-button icon="el-icon-refresh">重置</el-button>
      <el-button type="danger" icon="el-icon-delete">删除日志</el-button>
      <el-button type="danger" icon="el-icon-delete">清空日志</el-button>
    </div>
    <div class="footer">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="配置名称" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="调用标签" width="120">
        </el-table-column>
        <el-table-column prop="address" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address1" label="操作" class="w2">
          <el-link icon="el-icon-edit">编辑</el-link>
          <el-link icon="el-icon-delete-solid">删除</el-link>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "站点名称",
          name: "site_name",
          address: "GFAST文章系统",
        },
        {
          date: "首页地址",
          name: "site_url",
          address: "/home",
        },
        {
          date: "站点标题",
          name: "seo_title",
          address: "GFAST文章系统",
        },
        {
          date: "首页关键字",
          name: "seo_keywords",
          address: "GFAST文章系统",
        },
        {
          date: "首页描述",
          name: "seo_description",
          address: "GFAST文章系统",
        },
        {
          date: "站点底部信息",
          name: "site_footer",
          address: "copyright © 2023 云南奇讯科技有限公司",
        },
        {
          date: "主题模板",
          name: "theme_template",
          address: "default",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
  }
  .main {
    margin-top: 10px;
    width: 100%;
    flex: 1;
  }
  .footer {
    margin-top: 10px;

    width: 100%;
  }
}
.q2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.q3 {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>